<template>
  <div class="home">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb> -->
    <div id="homebar" style="width:500px;height:400px"></div>
    <div>
      <div class="home-line"><home-line></home-line></div>
      <div><home-pie></home-pie></div>
    </div>   
  </div>
</template>

<script>
import HomeLine from './HomeLine'
import HomePie from './HomePie.vue'
export default {
  name:'HomePage',
  components:{
    HomeLine,
    HomePie
  },
  methods:{},
  mounted(){
    const mCharts = echarts.init(document.getElementById('homebar'))
    const xVideoData = ['电视剧','电影','综艺','动漫','儿童','纪录片']
    const yVideoMunData =[1300,1500,1020,1000,1321,920]
    const option = {
      title:{
        text:'每月热播统计'
      },
      tooltip:{
        show: true,
        trigger:'axis'
      },
      toolbox:{
        feature:{
          saveAsImage:{},
          restore:{},
          dataView:{},
          dataZoom:{},
          magicType: {
            type:['line','bar']
          }
        }
      },
      xAxis:{
        type: 'category',
        data: xVideoData
      },
      yAxis:{
        type: 'value'
      },
      series:[
        {
          type: 'bar',
          name:'最新热播',
          data: yVideoMunData,
          label:{
            show: true,
            position: 'top'
          },
          showBackground:{
            show: true,
          },
          barWidth:'50%',
          itemStyle:{
            borderRadius: [30, 30, 0, 0],
            color:{
              type: 'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {offset:0,color:'red'},
                {offset:1,color:'blue'}
              ]
            }
          }
        }
      ]
    }
    mCharts.setOption(option)
  }
}
</script>

<style scoped>
  .home{
    display: flex;
    justify-content: space-evenly;
  }
  #homebar, #homepie{
    border: 1px solid rgb(202, 202, 202);
    border-radius: 10px;
  }
  #homeline{
    border: 1px solid rgb(202, 202, 202);
    border-radius: 10px;
    margin-bottom: 10px;
  }
</style>